<template>
	<view class="mainClass">
		<u-tabs class="uTabs" :list="tabsList" v-model="tabsCurrent" @change="tabsChange" :is-scroll="false"></u-tabs>

		<view class="dividerClass" v-if="tabsCurrent == 0">
			<view class="dividerClassItem" v-for="(item, index) of wyList" :key="index">
				<block v-if="item.list.length">
					<u-divider color="#333333" fontSize="36">{{ item.name }}</u-divider>
					<view class="bhpx" v-if="item.name == '常委会组成人员'">按姓名笔画排序</view>
				</block>

				<view class="">
					<view @tap="getIndetail(itemIn)" class="dividerClassItemInfo" v-for="(itemIn, indexIn) of item.list" v-if="item.list.length == 1">
						<view class="dividerClassItemInfoImg">
							<image :src="itemIn.remark1 ? $imagePreview(itemIn.remark1) : '../../static/inavatar.png'" mode=""></image>
						</view>
						<view class="dividerClassItemInfoText">
							{{ itemIn.NAME }}
						</view>
					</view>

					<view @tap="getIndetail(itemIn)" class="dividerClassItemInfo" v-for="(itemIn, indexIn) of item.list" v-if="item.list.length <= 3 && item.list.length > 1">
						<view class="dividerClassItemInfoImg">
							<image :src="itemIn.remark1 ? $imagePreview(itemIn.remark1) : '../../static/inavatar.png'" mode=""></image>
						</view>
						<view class="dividerClassItemInfoText">
							{{ itemIn.NAME }}
						</view>
					</view>

					<view class="dividerClassItemInfo2" v-if="item.list.length > 3">
						<view class="dividerClassItemInfo2Item" @tap="getIndetail(itemIn)" :style="index % 4 !== 0 ? 'margin-left:2rpx' : ''" v-for="(itemIn, indexIn) of item.list">
							<view class="dividerClassItemInfo2Img">
								<image :src="itemIn.remark1 ? $imagePreview(itemIn.remark1) : '../../static/inavatar.png'" mode=""></image>
							</view>
							<view class="dividerClassItemInfo2Text">
								{{ itemIn.NAME }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="dividerClassItem">
				<u-divider color="#333333" fontSize="36">常委会主任</u-divider>
				
				
				<view class="dividerClassItemInfo">
					<view class="dividerClassItemInfoImg">
						<image src="../../static/inavatar.png" mode=""></image>
					</view>
					<view class="dividerClassItemInfoText">
						阿松大
					</view>
				</view>
				
				
				<view class="dividerClassItemInfo2">
					<view class="dividerClassItemInfo2Item" :style="index % 4 !== 0 ? 'margin-left:10rpx' : ''" v-for="(item,index) of 9" >
						<view class="dividerClassItemInfo2Img">
							<image src="../../static/inavatar.png" mode=""></image>
						</view>
						<view class="dividerClassItemInfo2Text">
							阿松大
						</view>
					</view>
					
				</view>
			</view> -->
		</view>

		<view class="" v-if="tabsCurrent == '1'">
			<view class="search-view"><u-search class="search-input" v-model="getQuery.title" @search="search" @change="search"></u-search></view>
			<view class="list-box3-List" @tap="getInLX(item)" v-for="(item, index) of infoList" :key="index">
				<view class="list-box3-List-Top">
					{{ item.title }}
				</view>
				<view class="list-box3-List-Bottom">{{ item.createName }} {{ item.createTime }}</view>
			</view>

			<view class="add-Btn" @tap="getAddLxqk">
				<image src="@/pagesB/static/tj.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			userId2: '',
			wyList: [],
			infoList: [],
			wyuserInfo: {},
			getQuery: {
				pageNum: '1',
				pageSize: '10',
				title: ''
			},
			tabsList: [
				{
					name: '分工联系',
					value: 0
				},
				{
					name: '所有问题',
					value: 1
				}
			],
			tabsCurrent: 0
		};
	},
	onShow() {
		this.userId2 = this.userInfo.sysUser.id;
		this.getWYlist();
		this.getDetail();
	},
	onPullDownRefresh() {
		this.getDetail();
	},
	onReachBottom() {
		this.getAllDetail();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		getInLX(e) {
			uni.navigateTo({
				url: '/pagesA/lxHyxz/detail2?id=' + e.id
			});
		},
		getAddLxqk() {
			let that = this;
			uni.navigateTo({
				url: '/pagesA/lxHyxz/add2?userId=' + that.userId2
			});
		},
		getIndetail(e) {
			uni.navigateTo({
				url: '../../will/dbgzsInfo/dbgzsInfo?id=' + e.id + '&userId=' + e.userId + '&type=1'
			});
		},
		tabsChange(e) {
			this.tabsCurrent = e;
		},
		getWYlist() {
			this.$request('/minqingzhitong/ms-standing-committee/getCommitteeList', {}).then((res) => {
				if (res.code == 200) {
					let a = [];
					if (res.data && res.data.length !== 0) {
						res.data.map((item, index) => {
							if (a[item.dictValue - 1] && a[item.dictValue - 1].list) {
								a[item.dictValue - 1].list.push(item);
							} else {
								let noData = {
									name: item.dictName,
									list: []
								};
								if (item.userId){
									noData.list.push(item);
								}
								a[item.dictValue - 1] = noData;
							}
						});
						let info = JSON.parse(JSON.stringify(a[3]));
						a[3] = a[2];
						a[2] = info;
						this.wyList = a;
					}
				}
			});
		},
		search() {
			this.getDetail();
		},
		getDetail() {
			let that = this;
			this.$request('/minqingzhitong/ms-standing-committee/getRepresentativeDetail', {
				userId: that.userId2,
				title: that.getQuery.title,
				pageNum: that.getQuery.pageNum,
				pageSize: that.getQuery.pageSize
			}).then((res) => {
				if (res.code == 200) {
					that.wyuserInfo = res.data.userInfo;
					that.infoList = res.data.page.records;
					console.log('that.infoList', that.infoList);
				}
			});
		},
		getAllDetail() {
			let that = this;
			let a = JSON.parse(JSON.stringify(that.getQuery));
			a.pageNum++;
			this.$request('/minqingzhitong/ms-standing-committee/getRepresentativeDetail', {
				userId: that.userId2,
				pageNum: a.pageNum,
				pageSize: a.pageSize,
				title: that.getQuery.title
			}).then((res) => {
				if (res.code == 200) {
					that.wyuserInfo = res.data.userInfo;

					if (res.data.page.records && res.data.page.records.length !== 0) {
						that.getQuery.pageNum++;
						that.infoList.push(res.data.page.records);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.mainClass {
	min-height: 100vh;
	background-color: #ffffff;
}
.dividerClass {
	padding: 46upx 0 32upx 0;

	.dividerClassItem {
		margin-top: 26upx;
		.dividerClassItemInfo {
			margin-top: 32upx;
			.dividerClassItemInfoImg {
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 205.18upx;
					height: 251.35upx;
				}
			}

			.dividerClassItemInfoText {
				text-align: center;
				font-size: 34upx;
				color: #333333;
				margin-top: 22upx;
			}
		}

		.dividerClassItemInfo2 {
			display: flex;
			align-items: center;
			padding: 32upx 37upx 0 37upx;
			flex-wrap: wrap;
			.dividerClassItemInfo2Item {
				width: 161upx;
				height: 248upx;
				border: 1upx solid #f6f7f8;

				.dividerClassItemInfo2Img {
					display: flex;
					justify-content: center;
					image {
						width: 154upx;
						height: 188upx;
					}
				}

				.dividerClassItemInfo2Text {
					font-size: 28upx;
					color: #333333;
					text-align: center;
					padding-top: 6upx;
				}
			}
		}
	}
}

.bhpx {
	text-align: center;
	color: #999999;
	font-size: 26upx;
	padding: 20upx 0;
}

.add-Btn {
	position: fixed;
	right: 30upx;
	bottom: 180upx;
	image {
		width: 136upx;
		height: 136upx;
	}
}

.list-box3-List {
	height: 140upx;
	padding: 24upx 30upx;
	border-bottom: 1upx solid #f6f7f8;
	.list-box3-List-Top {
		color: #333333;
		font-size: 34upx;
		font-weight: 500;
		overflow: hidden; //超出隐藏
		white-space: nowrap; //不折行
		text-overflow: ellipsis; //溢出显示省略号
	}

	.list-box3-List-Bottom {
		padding-top: 10upx;
		font-size: 26upx;
		color: #666666;
	}
}
</style>
